/**
 * Created by cz on 2017/5/3.
 */
import React,{Component,PropTypes} from "react";
import{
 Text,
 View,
 Image,
 StyleSheet,
 Platform,
 StatusBar
}from "react-native";
const NAVIGATOR_HEIGHT_ANDROID = 50;
const NAVIGATOR_HEIGHT_IOS = 44;
const STATUS_BAR_HRIGHT = 20;
const StatusBarShape = {
    backgroundColor:PropTypes.string,
    barStyle:PropTypes.oneOf(['default', 'light-content', 'dark-content']),
    hidden:PropTypes.bool
};
export default class NavigatorBar extends Component{
    static propType = {
        style:View.propTypes.style,
        titie:PropTypes.string,
        titleView:PropTypes.element,
        hide:PropTypes.bool,
        leftButton:PropTypes.element,
        rightButton:PropTypes.element,
        statusBar:PropTypes.shape(StatusBarShape)
    };
/*    static defaultProps = {
        statusBar:{
            barStyle:"light-content",
            hidden:false
        }
    };*/
    constructor(props){
        super(props);
        this.state = {
            title:"",
            hide:false
        }
    }
   render(){
       let status = <View style={[styles.statusBar,this.props.statusBar]}>
           <StatusBar {...this.props.statusBar} />
       </View>;
       let titleView = this.props.titleView?this.props.titleView:<Text style={styles.title}>{this.props.title}</Text>;
       let content = <View style={styles.navBar}>
           {this.props.leftButton}
           <View style={styles.titleViewContainer}>
               {titleView}
           </View>
           {this.props.rightButton}
       </View>;
       return (
           <View style={[styles.container,this.props.style]}>
               {status}
               {content}
           </View>
       )
   }
}
const styles = StyleSheet.create({
    container:{
        backgroundColor:"#2196F3"
    },
    navBar:{
        justifyContent:"space-between",
        alignItems:"center",
        height:Platform.OS === 'ios'?NAVIGATOR_HEIGHT_IOS:NAVIGATOR_HEIGHT_ANDROID,
        flexDirection:"row"
    },
    //position????????
    titleViewContainer:{
        justifyContent:"center",
        alignItems:"center",
        position:"absolute",
        left:40,
        right:40,
        top:0,
        bottom:0
    },
    title:{
        fontSize:16,
        color:"#fff"
    },
    statusBar:{
        height:Platform.OS==="ios"?STATUS_BAR_HRIGHT:0
    }
});